<html>  
  <head>  
        <meta charset="utf-8">  
        <title>6.4.2 饼状图试作</title>  
  </head> 
  <style>

  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性


var dataset = [{ startAngle: 0 , endAngle: Math.PI * 0.6 },
			   { startAngle: Math.PI * 0.6 , endAngle: Math.PI },
			   { startAngle: Math.PI  , endAngle: Math.PI * 1.7 },
			   { startAngle: Math.PI * 1.7 , endAngle: Math.PI * 2 }];

//创建一个弧生成器
var arcPath = d3.svg.arc()
				.innerRadius(0)
				.outerRadius(100);

var color = d3.scale.category10();				
				
//添加路径
svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("d",function(d){ return arcPath(d); })	
	.attr("transform","translate(250,250)")
	.attr("stroke","black")
	.attr("stroke-width","2px")
	.attr("fill",function(d,i){ return color(i); });
	
//添加文字
svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.attr("transform",function(d){
		return "translate(250,250)" + 
				"translate(" + arcPath.centroid(d) + ")";
	})
	.attr("text-anchor","middle")
	.attr("fill","white")
	.attr("font-size","18px")
	.text(function(d){ return Math.floor((d.endAngle - d.startAngle)*180/Math.PI) + "°"; });


</script> 

</body>
</html>